import React, { Component, PropTypes } from 'react';
import { Form, Icon, Input, Select, Button, Checkbox, message } from 'antd';
import Md5 from 'js-md5';
import { connect } from 'dva'
import Style from './index.less';
import Service from '../service';
import $ from 'jquery';

const FormItem = Form.Item;
var map, point;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      searchValue: '',
      isSearch: false,
      expressComList: [], //快递公司中英文转换
      numberTypeList: []
    }
  }
  componentDidMount() {
    // 
    let self = this;
    self.props.getExpressCom({
      params: {
      },
      func: function (data) {
        if (data) {
          let expressComList = [];
          for (let i = 0; i < data.length - 1; i++) {
            expressComList[data[i].com] = data[i].name
          }
          self.setState({
            expressComList: expressComList
          })
        }
      }
    })
    // console.log(expressComList)


  }
  componentWillUnmount() {
    let self = this;
    self.props.urlStatus({
      url: '/usearchnumber'
    });
    // console.log(111111111111111)
  }
  // 返回
  returnFun = () => {
    let self = this;
    if (self.state.isSearch) {
      self.setState({
        isSearch: false
      })
    } else {
      this.context.router.push(`/uindex`);
    }

  }
  //  签收
  signFun = () => {

  }
  // 拒签
  nosignFun = () => {
    this.context.router.push(`/ucomment`);
  }
  selectHandleChange = (value) => {
    let self = this;
    self.setState({
      numberType: value
    })

  }
  // 搜索
  searchConFun = (event) => {
    let v = event.target.value;
    this.setState({
      searchValue: v
    })
  }
  /* 控制提示 */
  messageConfig() {
    message.config({
      top: 100, // 消息距离顶部的位置
      duration: 2, // 默认自动关闭延时，单位秒
      maxCount: 1, // 最大显示数, 超过限制时，最早的消息会被自动关闭
    });
  }
  // 搜索
  searchSubmit = () => {
    let self = this;
    let searchNumber = self.state.searchValue;
    const token = localStorage.getItem('token');
    let numberType = self.state.numberType;
    if (!searchNumber) {
      message.error('请输入快递单号');
      self.messageConfig();
      return false;
    }
    if (!numberType) {
      message.error('请选择快递公司');
      self.messageConfig();
      return false;
    }

    // -1:无物流信息,0在途，1揽收，2疑难，3签收，4退签，5派件，6退回 
    // 0 无message 根据location查经纬度
    // 0 有message
    // 5 有message
    self.props.queryExpress({
      params: {
        token: token,
        com: numberType,
        num: searchNumber
      },
      func: function (result) {
        // console.log(result.length)
        // console.log(result[result.length - 1].loc)
        // console.log(result)
        sessionStorage.setItem('loc', result[result.length - 1].loc)
        self.context.router.push(`/uindex`);

      }
    })
    // 


  }
  searchNumberTypeFun = () => {
    let self = this;
    const token = localStorage.getItem('token');
    let searchNumber = self.state.searchValue;
    // if (searchNumber) {
    //   self.props.queryExpressCode({
    //     params: {
    //       token: token,
    //       num: searchNumber
    //     },
    //     func: function (result) {

    //       self.setState({
    //         numberTypeList: result.list,
    //         numberType: ''
    //       })

    //     }
    //   })

    // }

  }
  // 我的
  myUrlFun = () => {
    this.context.router.push(`/umy`);
  }
  // 我的
  myUrlFun = () => {
    this.context.router.push(`/umy`);
  }
  returnFun = () => {
    let self = this;
    self.setState({
      isSearch: false
    })
    // console.log(441411)
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { numberTypeList } = this.state;
    return (
      <div className={Style.wrap}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            {this.state.isSearch &&
              <span className={Style.arrow} onClick={this.returnFun}>
                <Icon type="left" />
              </span>
            }

            搜索快递单号
            <span onClick={this.myUrlFun} className={Style.arrow + ' ' + Style.arrowText} >我的</span>
          </div>
        </div>
        {!this.state.isSearch &&
          <div className={Style.dataWrap}>

            <div className={Style.searchWrap + ' ' + Style.searchNumber}>
              <div className={Style.searchInput}>
                <span className={Style.searchIcon}>
                  <Icon type="search" />
                </span>
                <input onChange={this.searchConFun} value={this.state.searchValue} onBlur={this.searchNumberTypeFun} />
              </div>
              <div className={Style.numberFilter}>
                快递公司：
                <span className={Style.selectTitle + ' ' + 'userSelect'}>
                  <Select placeholder="选择快递公司" value={this.state.numberType} dropdownClassName="selectKd" style={{ width: 120 }} onSelect={this.selectHandleChange}>
                    <Option value=" ">选择快递公司</Option>
                    <Option value="1">中通快递</Option>
                    <Option value="2">圆通快递</Option>
                    <Option value="3">韵达快递</Option>
                    <Option value="4">百世快递</Option>
                    <Option value="5">邮政快递</Option>
                  </Select>
                </span>
              </div>
            </div>

            <div className={Style.btn + ' ' + Style.blueBtn + ' ' + Style.mt10} onClick={this.searchSubmit}>
              搜索
            </div>
          </div>
        }
        {this.state.isSearch &&
          <div className={Style.nodata}>
            <h3>暂无数据</h3>
            <p>请联系你的管理员</p>
          </div>
        }

      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  return {
    expressData: state.umodel.expressData
  }
}
function dispatchToProps(dispatch) {
  return {
    queryExpressCode(payload, params) {
      dispatch({
        type: 'umodel/queryExpressCode',
        payload
      })
    },
    queryExpress(payload, params) {
      dispatch({
        type: 'umodel/queryExpressTest',
        payload
      })
    },
    save(payload, params) {
      dispatch({
        type: 'umodel/saveStatus',
        payload
      })
    },
    getExpressCom(payload, params) {
      dispatch({
        type: 'umodel/getExpressCom',
        payload
      })
    },
    urlStatus(payload, params) {
      dispatch({
        type: 'myHome/urlStatus',
        payload
      })
    }
  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
